<template>
  <div class="main-view">
    <div class="main-header"></div>
    <div class="main-content">
      <div class="nav">
        <div
          class="nav-item"
          :class="{ active: item.active }"
          :key="item.code"
          v-for="item in navs"
          @click="changeNav(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import routes from "../config/routes.js";
export default {
  name: "MainView",
  data() {
    return {
      navs: routes,
    };
  },
  created() {
    this.initRouter();
  },
  mounted() {},
  methods: {
    changeNav(item) {
      if (item.active) {
        return;
      }
      this.$router.push({ name: item.pathName });
      this.navs.forEach((nav) => {
        if (nav.code === item.code) {
          nav.active = true;
        } else {
          nav.active = false;
        }
      });
    },
    initRouter() {
      const path = this.$route.name;
      const TargetPath = this.navs.find((item) => item.active).pathName;
      if (path !== TargetPath) {
        this.$router.push({ name: TargetPath });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main-view {
  width: 100%;
  height: 100%;
  .main-header {
    width: 100%;
    height: 60px;
    box-shadow: 0 0 10px #ccc;
    margin: 0 0 10px 0;
  }
  .main-content {
    width: 100%;
    height: calc(100% - 70px);
    display: flex;
    .nav {
      width: 200px;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      padding: 6px;
      .nav-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 2px 0;
        cursor: pointer;
        border: 1px solid #aaa;
        border-radius: 4px;
      }
      .nav-item:hover {
        background-color: #1890ff;
        color: #fff;
        border: 1px solid #1890ff;
      }
      .nav-item.active {
        background-color: #1890ff;
        color: #fff;
        border: 1px solid #1890ff;
      }
    }
    .content {
      width: calc(100% - 200px);
      padding: 15px;
    }
  }
}
</style>
